<template>
  <div class="">
    <el-dialog :title="$tt('label_reference_price')" width="1000px" append-to-body :visible.sync="dialogVisible">
      <ex_super_table_page v-bind="option" ref="SuperTablePage" :autoLoad="false" :urlParams="{skuId}"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{
          $tt("label_cancel")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import superTablePageFunction from "@/mixin/super-table-page-function";
import page_table_model_manage from "@/mixin/page_table_model_manage";
export default {
  mixins: [superTablePageFunction, page_table_model_manage],
  components: {},
  props: {
    dialogData: Object,
  },
  data() {
    return {
      dialogVisible: false,
      skuId:'',
      option: {
        style: {
          height: "500px",
        },
        search: {
          model: [
            {
              label: "label_supplier",
              key: "supplierId",
              render: (h, { data, item }) => {
                return h("supplier_select_input", {
                  props: {
                    value: data[item.key],
                    customerId: this.dialogData.customerId,
                  },
                  style: {
                    width: "100%",
                  },
                  on: {
                    changeItem: (e) => {
                      const { supplierName, id, supplierOnlyCode } = e || { supplierName: "", id: '', supplierOnlyCode: '' };
                      this.$set(data, item.key, id);
                      this.$set(data, "supplierName", supplierName);
                      this.$set(data, "supplierOnlyCode", supplierOnlyCode);
                    },
                  },
                });
              },
            },
            {
              label: "label_expected_arrival_date",
              key: "daterange",
              type: 'date-picker',
              attrs: {
                type: 'datetimerange',
                'picker-options': {
                  disabledDate: (t) => {
                    return t.getTime() > new Date().getTime()
                  }
                },
              },
              keyExtra: { _emitKey: 'input', 0: 'createDateStart', 1: 'createDateEnd' }
            },

          ],
        },
        table: {
          url: "/oms-api/purchase/OmsPurchaseOrderRpc/selectHistoryDetailPage.json",
          attrs: {},
          model: this.init_table_model(),
        },
      },
    };
  },
  watch: {},
  computed: {},
  created() { },
  mounted() { },
  methods: {
    show(row) {
      this.skuId =row.skuId
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.reload()
      })
    },
    option_table_model() {
      return [
        {
          key: "purchaseOrderCode",
          label: "label_purchase_purchase_order",
          "min-width": 130,
          "show-overflow-tooltip": true,
        },
        {
          key: 'gmtCreate',
          label: 'label_create_time',
          formatter: (r, c, v, i) => this.$dateFormat(v)
        },
        {
          key: "purchasePrice",
          label: "label_purchase_unit_price",
          "min-width": 130,
          "show-overflow-tooltip": true,
        },
        { key: 'currencyCode', label: 'label_currency_kind', "min-width": 130, formatter: (r, c, v, i) => this.$enumShow(v, "CurrencyTypeEnum"), 'show-overflow-tooltip': true, },
        {
          key: "purchaseQty",
          label: "label_count",
          "min-width": 130,
          "show-overflow-tooltip": true,
        },
        {
          key: "supplierName",
          label: "label_supplier",
          "min-width": 200,
          "show-overflow-tooltip": true,
          formatter: (r, c, v) => this.$formatNameCode(v, r.supplierOnlyCode),
        },
      ];
    },
  },
  destroyed() { },
};
</script>

<style lang="less" scoped></style>
